<template>
<div class="header">

   <div class="header-left">
       <span class="iconfont">&#xe624;</span>
   </div>

   <div class="header-search">
     <span class="iconfont"> &#xe632;</span>
     输入城市/景点/游玩主题
   </div>

   <div class="header-right">
       <router-link to="/city">
         重庆
       <span class="iconfont">&#xe600;</span>
       </router-link>
   </div>
   
</div> 
</template>

<script>

</script>
<style scoped lang='stylus'>
  @import '~css/var.styl'   
    //  webpack里面配置css为src/assets/css 避免路径过长
.header{
    width: 100%;
    line-height: .88rem;
    background: $bgColor;
    color:#fff;
    font-size: .36rem;
    display: flex;
}
.header-search{
    flex: 1;
    background: $text-Color;
    height: .6rem;
    margin: .14rem 0;
    border-radius:.1rem;
    color:#e4e7ea;
    line-height: .6rem;
    font-size: .28rem;
    padding-left:.2rem ;
}
.header-left{
    width: .4rem;
    padding:0 0.2rem;
    text-align: center;
    font-weight: bold;
}
 .header-right{
    font-size: .28rem;
    padding: 0 .2rem;
}
.header-right a{
    color :#fff;    
}
</style>